define(['./BaseView', 'jquery'], function (BaseView, $) {
    require('../../less/selectnewview.less');
    return BaseView.extend({
        type: "SelectView",
        events: {
            'click .select-title li': 'showList',
            'click .select-list li': 'selectMsg',
            'click .select-view-mask': 'hideMask'
        },
        //  退出时隐藏mask
        initGoBack: function initGoBack() {
            var _this = this;
            $('.left').click(function () {
                _this.hideMask(_this);
            });
        },
        hideMask: function (e) {
            var _this = this;
            $(e.target).hide();
            _this.$el.find('.select-view-mask').hide();
            _this.$selectTitle.find('.selected').removeClass('selected');
            _this.$selectList.hide();
        },
        render: function () {
            let _this = this;
            let tmp = `<div class="select-new-view">
                            <ul class="select-title">
                        </ul>
                            <ul class="select-list">

                            </ul>
                        </div>
                        <div class="select-view-mask"></div>`;
            _this.$el.html(tmp);
            _this.$selectList = _this.$el.find('.select-list');
            _this.$selectTitle = _this.$el.find('.select-title');
            _this.$mask = _this.$el.find('.select-view-mask');
            return this;
        },
        showList: function (e) {
            let _this = this;
            let $this = $(e.currentTarget);
            let index = $this.index();

            _this.initGoBack();

            if ($this.hasClass('selected')) {
                $('.select-view-mask').hide();
                _this.$selectTitle.find('.selected').removeClass('selected');
                _this.$selectList.hide();
                return;
            }
            $this.addClass('selected').siblings().removeClass('selected');
            let itemArray = $this.data('item');
            let current = $this.find('span').text();    // 由 name 判断改为由 id 判断
            let currentId = $this.find('span').attr('data-id') || '0';
            let isLeft = !!(itemArray[0].dept_id || itemArray[0].g_id);
            let prependHtml = '';
            let name = itemArray.name;
            let id = itemArray.id;
            let tmp = '';
            let firstEle = true;
            if (itemArray.length > 0) {

                itemArray.forEach(function (item, index) {
                    // 两个数组合成一块了, 间接赋值, 其实情非得以

                    // 是全部或部门
                    if (!item[id]) {
                        // 是全部
                        if (item['dept_id'] === (itemArray[0].dept_id)) {
                            // 是当前选项
                            if (currentId === (item['dept_id'])) {
                                tmp += `<li class="selected js-all" data-id="${item['dept_id']}">${item['dept_name']}</li>`;
                            } else {
                                tmp += `<li class="js-all" data-id="${item['dept_id']}">${item['dept_name']}</li>`;
                            }
                        // 是部门
                        } else {
                            // 是当前选项
                            if (currentId === (item['dept_id'])) {
                                tmp += `<li class="selected js-departpent" data-id="${item['dept_id']}">${item['dept_name']}</li>`;
                            } else {
                                tmp += `<li class="js-departpent" data-id="${item['dept_id']}">${item['dept_name']}</li>`;
                            }
                        }
                    } else {

                        if (currentId === (item[id])) {
                            // 添加团队标签
                            if (firstEle && isLeft) {
                                tmp += '<li class="title-diver">团队</li>';
                                firstEle = false;
                            }
                            tmp += `<li class="selected" data-id="${item[id]}">${item[name]}</li>`;
                        } else {
                            if (firstEle && isLeft) {
                                tmp += '<li class="title-diver">团队</li>';
                                firstEle = false;
                            }
                            tmp += `<li data-id="${item[id]}">${item[name]}</li>`;
                        }
                    }

                });
            }
            _this.$selectList.html(prependHtml + tmp).show();
            _this.$mask.show();
        },
        selectMsg: function (e) {
            let $this = $(e.target);
            let _this = this;
            if ($this.hasClass('title-diver')) return;
            let flag = $this.hasClass('js-departpent') ? 1 : $this.hasClass('js-all') ? 0:2;
            let flag_id = $this.data('id');
            let current = $this.text();
            let itemTitle = _this.$selectTitle.find('.selected').index();
            _this.$selectTitle.find('.selected span').text(current);
            _this.$selectTitle.find('.selected span').attr('data-id', flag_id);
            _this.$selectList.hide();
            _this.$mask.hide();
            _this.$selectTitle.find('.selected').removeClass('selected');
            $this.addClass('selected');
            _this.trigger('itemSelect', {
                itemName: current,
                itemTitle: itemTitle,
                flag: flag,
                id: flag_id
            });

        },
        setItem: function (leftArray, rightArray) {
            let _this = this;
            let tmp = '';
            let leftKey = leftArray['name'];
            let rightKey = rightArray['name'];
            let leftName = '';
            let leftIdName = '';
            let rightIdName = 't_id';
            let index = 0;  // 0 既没部门又没团队  1 有部门或团队,选择第一个

            // 有部门或者团队
            if (leftArray.length > 1) {
                leftName = leftArray[1].dept_id ? 'dept_name' : 'g_name';
                leftIdName = leftArray[1].dept_id ? 'dept_id' : 'g_id';
                index = 1;
            
            // 没有部门没有团队,只有全部    
            } else if (leftArray.length === 1){
                leftName = 'dept_name';
                leftIdName = 'dept_id';
            }

            tmp = `<li>
                       <span data-id=${leftArray[index][leftIdName]}>${leftArray[index][leftName]}</span>
                   </li>
                   <li>
                       <div class="border"></div>
                       <span data-id=${rightArray[0][rightIdName]}>${rightArray[0][rightKey]}</span>
                   </li>`;

            var $tmp = $(tmp);
            $tmp.each(function (k, v) {
                if (!k) {
                    $(v).data('item', leftArray);

                } else {
                    $(v).data('item', rightArray);
                }

            });
            _this.$selectTitle.html($tmp);

        }

    });
})